import React, { useState, useEffect } from "react";
import pointssuccessful from "../style/pointssuccessful.module.css";
import { useNavigate } from "react-router-dom";
import { Grid } from "antd-mobile";
import searchIcon from "../img/dui.png";
import { score } from "../api/score";
import scorecart from "../img/scorecart.png";
import scoreYE from '../img/scoreYE.png'
function Pointssuccessful() {
  const navigate = useNavigate();
  // 直接在组件文件中定义类型
  interface Product {
    id: string | number;
    img: string;
    title: string;
    points: number;
    price?: number;
    original_price?: number;
    synopsis?: string;
  }

  interface ProductType {
    id: string | number;
    title: string;
    sub_title: string;
  }

  interface ScoreData {
    score: number;
    types: ProductType[];
    products: Product[];
    hotProducts: Product[];
  }
  const [scoreData, setScoreData] = useState<ScoreData>({
    score: 0,
    types: [],
    products: [],
    hotProducts: [],
  });
  const handleHome = () => {
    navigate("/home");
  };

  const handleOrder = () => {
    navigate("/scoreDetails");
  };
  useEffect(() => {
    fetchScoreData();
  }, []);
  const user = JSON.parse(localStorage.getItem("user") || "null"); //用户数据
  console.log(user.data.token, "请求头token");
  console.log(user.data.id, "请求id");
  const fetchScoreData = async () => {
    try {
      const response = await score({
        user_id: user.data.id,
      });
      console.log(response.data, "数据");

      if (response.data.code === 1) {
        const data = response.data.data;
        setScoreData({
          score: data.score || 0,
          types: data.type || [],
          products: data.list || [],
          hotProducts: data.hotProducts || [],
        });
      }
    } catch (error) {
      console.error("请求失败:", error);
    }
  };

  const handleshopClick = (product: Product) => {
    localStorage.setItem(
      "currentProduct",
      JSON.stringify({
        productId: product.id,
        productImg: product.img,
        productPrice: product.price,
        productTitle: product.title,
      })
    );
    navigate("/productDetailPage");
  };
  const renderProducts = () => (
    <Grid columns={2} gap={8}>
      {scoreData.products.map((product: Product) => (
        <Grid.Item key={product.id} onClick={() => handleshopClick(product)}>
          <div className={pointssuccessful.productCard}>
            <img src={product.img} alt={product.title} />
            <h4>{product.title}</h4>
            <div className={pointssuccessful.price}>
              <span className={pointssuccessful.jifen}>
                <img
                  src={scoreYE}
                  alt=""
                />{" "}
                {product.price}
              </span>
              <div className={pointssuccessful.exchangeBtn}>
                <img
                  src={scorecart}
                  alt=""
                />
              </div>
            </div>
          </div>
        </Grid.Item>
      ))}
    </Grid>
  );

  return (
    <div className={pointssuccessful.container}>
      <div className={pointssuccessful.top}>
        <b style={{ fontSize: "20px" }}>购买成功</b>
      </div>

      <div className={pointssuccessful.img}>
        <div className={pointssuccessful.imgs}>
          <img src={searchIcon} alt="success" />
        </div>
        <p>兑换成功</p>
        <div className={pointssuccessful.two}>
          <div className={pointssuccessful.shouye} onClick={handleHome}>
            返回首页
          </div>
          <div className={pointssuccessful.dingdan} onClick={handleOrder}>
            查看订单
          </div>
        </div>
      </div>

      <div className={pointssuccessful.three}>
        <div></div>
        <p>为您推荐</p>
        <div></div>
      </div>
      {renderProducts()}
    </div>
  );
}

export default Pointssuccessful;
